<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; }
a{color:#333;text-decoration:none;font-size:30px;}
.nav{list-style:none; height:50px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left}
.nav li a{display:block; height:50px;text-align:center; line-height:50px; width:150px; background:#efefef; margin-left:1px;}
.nav li a.on, .nav li a:hover{background:#F60;color:#fff; }

</style>
</head>
<body>
<ul class="nav">
    <li><a  href="#">全部</a></li>
    <li><a  href="#">待审批</a></li>
    <li><a href="#">已审批</a></li>
    <li><a href="#">已签到</a></li>
    <li><a href="#">修改密码</a></li>
  </ul>

  <div data-role="content">
    <div data-role="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
    </div>
  </div>
{{ data }}
</body>
</html>